<template>
  <div class="autoHeight">
    <el-row :gutter="20" style="margin:20px; height: 700px;">
      <!-- <el-col :span="8" style=" height: 100%;">
         <el-card class="box-card" style="padding: 20px; height: 100%;">
           <div slot="header" class="clearfix">
             <span>用户信息</span>
           </div>
           <el-form ref="form" label-width="100px" label-position="left">
             <el-form-item label="登录名：">
               {{ user.loginName }}
             </el-form-item>
             <el-form-item label="用户姓名：">
               {{ user.name }}
             </el-form-item>
             <el-form-item label="所属单位：">
               {{user.instituteName}}/{{user.departmentName}}
             </el-form-item>
             <el-form-item label="状态：">
               有效
             </el-form-item>
             <el-form-item label="创建时间：">
               {{ user.createTime }}
             </el-form-item>
           </el-form>

         </el-card>
       </el-col>-->
      <!--<el-col :span="9" v-if="hasPermission(['mhProjectInfo:update','mhProjectInfo:delete'])">
        <el-card class="box-card" style="margin: 20px; padding: 20px; height: 380px;">
          <div slot="header" class="clearfix"><span>待办任务</span></div>
          <el-form ref="form" label-width="100px" label-position="left">
            <el-form-item label="暂无待办任务">
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>-->
      <el-col :span="24" v-if="hasPermission(['mhNotice:query'])" style=" height: 100%;">
        <el-card class="box-card" style="padding: 20px; height: 100%;">
          <div slot="header" class="clearfix">
            <span>站内通知</span>
            <span style="margin-left: 20px; font-size: 14px; color: #df5000; ">{{noticeUnreadCound}}条未读通知</span>
            <span style="margin-left: 20px; font-size: 14px; color: #3b89f0; ">{{noticeUnreadCoundWithDraw}}条撤销申请未读</span>
          </div>

          <div id="task">
            <!--<div class="header">
              <span style="width: 80%; text-align: center;">通知内容</span>
              <span style="width: 20%; text-align: center;">创建时间</span>
            </div>-->
            <!--<vue-seamless-scroll :data="noticeUnreadList" class="seamless-warp" style="margin-bottom: 10px;">
            </vue-seamless-scroll>-->
            <el-scrollbar style="height: 600px;">
              <div class="seamless-warp">
                <ul class="item">
                  <li v-for="(item, index) in noticeUnreadList" :key="index">
                    <span v-if="item.isRead.id==1" style="width: 80%; text-align: left;" v-text="item.content"
                          :data-itemid="item.id" @click="clickItem(item)"></span>
                    <span v-else-if="item.mhStatus==1&&item.isRead.id==0" style="width: 80%; text-align: left; color: #3b89f0" v-text="item.content"
                          :data-itemid="item.id" @click="clickItem(item)"></span>
                    <span v-else-if="item.mhStatus==1&&item.isRead.id==0" style="width: 80%; text-align: left; color: #3b89f0" v-text="item.content"
                          :data-itemid="item.id" @click="clickItem(item)"></span>
                    <span v-else style="width: 80%; text-align: left; color: #df5000;" v-text="item.content"
                          :data-itemid="item.id" @click="clickItem(item)"></span>
                    <span style="width: 20%; text-align: right;" v-text="item.createdate" :data-itemid="item.id"
                          @click="clickItem(item)"></span>
                  </li>
                </ul>
              </div>
            </el-scrollbar>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="通知单" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <form-details ref="formDetails" :row="row" :isModule="true"/>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import checkPermission from '@/utils/permission'
  import MhNoticeListIndex from '@/views/coding/citymh/mhNotice/list-index.vue'
  import { fetchList, updateApi } from '@/views/coding/citymh/mhNotice/api'
  import FormDetails from '@/views/coding/citymh/mhNotice/form-details.vue' // notice details

  import Vue from 'vue'
  import scroll from 'vue-seamless-scroll'

  Vue.use(scroll)

  export default {
    name: 'Dashboard',
    components: { MhNoticeListIndex, FormDetails },
    computed: {
      ...mapGetters([
        'name', 'permission_routes', 'user'
      ])
    },
    data() {
      return {
        activeName: 'first',
        noticeUnreadCound: 0,
        noticeUnreadCoundWithDraw: 0,
        noticeUnreadList: [],
        // notice details
        dialogFormVisible: false,
        row: {}
      }
    },
    mounted() {
      this.handleNoticeUnreadCount()
      this.handleNoticeWithdrawUnreadCount()
      this.handleNoticeUnreadList()
    },
    methods: {
      // 页面级权限控制，调用方法如：hasPermission(['a2user:delete'])
      hasPermission(needPermisions) {
        return checkPermission(needPermisions)
      },

      handleNoticeUnreadCount() {
        const params = {}
        params.page = 1
        params.limit = 1
        params.isRead = 0
        // params.mhStatus = 1

        fetchList(params).then(result => {
          if (result.success) {
            this.noticeUnreadCound = result.map.total
            // this.noticeUnreadCoundWithDraw = result.map.total
            // this.noticeUnreadCoundWithDraw = result.map.
          }
        })
      },

      handleNoticeWithdrawUnreadCount() {
        const params = {}
        params.page = 1
        params.limit = 1
        params.isRead = 0
        params.mhStatus = 1

        fetchList(params).then(result => {
          if (result.success) {
            // this.noticeUnreadCound = result.map.total
            this.noticeUnreadCoundWithDraw = result.map.total
            // this.noticeUnreadCoundWithDraw = result.map.
          }
        })
      },

      handleNoticeUnreadList() {
        const params = {}
        params.page = 1
        params.limit = 1000
        params.isRead = 0;
        fetchList(params).then(result => {
          if (result.success) {
            // this.noticeUnreadCound = result.map.total
            this.noticeUnreadList = result.map.rows
          }
        })
      },

      updateDataToRead() {
        const param = {}
        param.id = this.row.id
        param.isRead = 1
        updateApi(param).then((r) => {
          this.handleNoticeUnreadCount()
          this.handleNoticeWithdrawUnreadCount()
          this.handleNoticeUnreadList()
        })
      },

      clickItem(row) {
        this.row = Object.assign({}, row) // copy obj
        this.dialogFormVisible = true
        this.updateDataToRead()
      }

    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 16px;
      line-height: 46px;
      color: #333333;
    }
  }
</style>

<style lang="less" scoped>

  #task {
    width: 100%;
    height: 100%;
    /*padding-right: 10px;*/

    .header {
      height: 40px;
      width: 100%;
      font-size: 15px;
      /*align-items: center;*/
      text-align: center;
      display: flex;
      color: #666;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /*border-radius: 15px;*/
    }

    .seamless-warp {
      height: calc(~"100% - 100px");
      width: 100%;
      /*overflow: hidden;*/
      overflow: auto;
      font-size: 14px;

      .item {
        width: 100%;
        height: 100%;
        list-style: none;
        line-height: 40px;
        margin: 0;
        padding: 0 2px 0 2px;

        li {
          width: 100%;
          height: 100%;
          cursor: pointer;
          color: #666;

          span {
            width: 25%;
            font-weight: normal;
            text-align: center;
            float: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }

      /*
            .name {
              width: 25%;
              font-weight: normal;
              text-align: center;
              float: left;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              padding-left: 10px;
            }


            .address {
              width: 25%;
              font-weight: normal;
              text-align: left;
              float: left;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              padding-left: 10px;
            }

            .authName {
              width: 25%;
              font-weight: normal;
              text-align: center;
              float: left;
              padding-left: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            .mains {
              width: 25%;
              font-weight: normal;
              text-align: left;
              float: left;
              padding-left: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            .status {
              width: 25%;
              font-weight: normal;
              text-align: center;
              float: left;
              padding-left: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }*/
    }
  }
</style>
